<html>
<head>
  <title>Evernote Export</title>
  <basefont face="微软雅黑" size="2" />
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <meta name="exporter-version" content="YXBJ Windows/602326 (zh-CN, DDL); Windows/10.0.0 (Win64); EDAMVersion=V2;"/>
  <style>
    body, td {
      font-family: 微软雅黑;
      font-size: 10pt;
    }
  </style>
</head>
<body>
<a name="520"/>

<div>
<span><div><div><div><div><div><span style="font-size: 18pt;">面试大全 2020年11月2日</span></div><ol><li><div><h2 style="margin: 2.33333em 0px 1.16667em; clear: left; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255);"><span style="clear: left; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="font-size: 12pt; color: rgb(255, 0, 0); font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: bold; line-height: 1.5;">calc,</span> <span style="font-size: 12pt; color: rgb(255, 0, 0); font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: bold; line-height: 1.5;">support, media各自的含义及用法？</span></span></h2></div></li></ol><h2 style="margin-top: 2.33333em; margin-right: 0px; margin-bottom: 1.16667em; font-size: 1.2em; clear: left; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="color: rgb(18, 18, 18); font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: bold; line-height: 1.5;">        1. @support主要是用于检测浏览器是否支持CSS的某个属性，其实就是条件判断，如果支持某个属性，你可以写一套样式，如果不支持某个属性，你也可以提供另外一套样式作为替补。</span></h2><div><span style="font-size: 11pt; font-weight: bold;">        2. </span> <span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; font-size: 11pt; color: rgb(18, 18, 18); font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: bold;">calc() 函数用于动态计算长度值。 calc()函数支持 &quot;+&quot;, &quot;-&quot;, &quot;*&quot;, &quot;/&quot; 运算；</span></div><div><br/></div><div><font style="font-size: 11pt;"><span style="font-size: 11pt; font-weight: bold;">        3. </span><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="font-size: 11pt; color: rgb(18, 18, 18); font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: bold;">@media 查询，你可以针对不同的媒体类型定义不同的样式。</span></span></font></div><div><span style="font-size: 11pt;"><br/></span></div><ol start="2"><li><div><span style="vertical-align: sub;"><span style="font-size: 12pt; color: rgb(255, 0, 0); font-weight: bold;">水平居中的各种方式</span></span></div></li></ol><div><span style="font-size: 14pt; color: rgb(18, 18, 18); font-family: unset; font-weight: bold;">        </span><span style="font-size: 12pt; color: rgb(18, 18, 18); font-family: unset;">水平方向居中</span></div></div><div><span style="font-size: 14pt; color: rgb(18, 18, 18); font-family: unset; font-weight: bold;">    </span><span style="font-size: 14pt;"><span style="font-size: 14pt; color: rgb(18, 18, 18); font-family: unset; font-weight: bold;">        </span><span style="font-size: 12pt; color: rgb(18, 18, 18); font-family: unset;">1. text-align:center</span></span></div><div><span style="font-size: 12pt; color: rgb(18, 18, 18); font-family: unset;">              2. justify-content: center;</span></div><div><span style="font-size: 12pt; color: rgb(18, 18, 18); font-family: unset;">              3. margin: 0 auto;</span></div><div><span style="font-size: 12pt; color: rgb(18, 18, 18); font-family: unset;">              4. position: absolute; margin-left: 50%;transformX: (-50%);</span></div><div><span style="font-size: 14pt; color: rgb(18, 18, 18); font-family: unset; font-weight: bold;">        </span><span style="font-size: 12pt; color: rgb(18, 18, 18); font-family: unset;">垂直方向居中</span></div><div><span style="font-size: 14pt; color: rgb(18, 18, 18); font-family: unset; font-weight: bold;">     </span>           <span style="font-size: 11pt; color: rgb(18, 18, 18); font-family: unset;">1. line-height和height高度一直</span></div><div><span style="font-size: 11pt; color: rgb(18, 18, 18); font-family: unset;">                2. display:flex;align-items: center;</span></div><div><span style="font-size: 11pt; color: rgb(18, 18, 18); font-family: unset;">                3. position: absolute; margin-top: 50%;transformY(-50%)</span></div><div><span style="font-size: 11pt; color: rgb(18, 18, 18); font-family: unset;">                4. </span><span style="font-size: 11pt; color: unset; font-family: unset;">display:table+display:table-cell + vertical-align: middle;</span></div><ol start="3"><li><div><h2 style="margin: 2.33333em 0px 1.16667em; clear: left; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255);"><span style="clear: left; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="font-size: 12pt; color: rgb(255, 0, 0); font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: bold; line-height: 1.5;">1rem、1em、1vh、1px各自代表的含义？ </span></span></h2></div></li></ol><div><span style="font-size: 1.2em; clear: left; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(18, 18, 18); font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: bold; line-height: 1.5;">          1. rem表示一个比例，这个比例可能是字体大小和屏幕的比例，如果屏幕是375px font-size是12px 比例就是 1: (375/12)</span></div></div><div><span style="font-size: 11pt;"><span style="font-size: 11pt; color: rgb(18, 18, 18); font-weight: bold;">        <img src="面试大全 2020年11月2日_files/Image.png" type="image/png" data-filename="Image.png"/></span></span></div><div>            <font style="font-size: 12pt;"><span style="font-size: 12pt; font-weight: bold;">2. rem和em的区别</span></font></div><div>           <span style="font-size: 11pt;">     </span><span style="font-size: 12pt;">2.1 em和rem的区别一句话概括:em相对于父元素，rem相对于根元素(html)</span></div><div><span style="font-size: 12pt;">                   em中</span><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; font-size: 12pt; color: rgb(0, 0, 0); font-family: &quot;Helvetica Neue&quot;, Helvetica, Verdana, Arial, sans-serif; font-variant-caps: normal; font-variant-ligatures: normal;">自身元素如果写成：font-size:2em;则自身元素用px表示就是24px（相对父元素字体大小）;</span></div><div><span style="font-size: 12pt;">               2.2 rem中的r意思是root（根源）</span></div><ol start="4"><li><div><span style="font-size: 12pt; color: rgb(255, 0, 0); font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-weight: bold;">画一条0.5px的直线？</span></div></li></ol><div><span style="font-size: 11pt; color: rgb(255, 0, 0); font-weight: bold;">         </span> <span style="font-size: 12pt; color: rgb(255, 0, 0);">   </span><span style="font-size: 12pt;">height: 1px;</span></div><div><div><span style="font-size: 12pt;">            transform: scale(0.5);</span></div><ol start="5"><li><div><span style="font-size: 12pt;"><span style="font-size: 12pt; color: rgb(255, 0, 0); font-weight: bold;">盒模型是什么？</span></span></div></li></ol><div><br/></div></div><div><span style="font-size: 11pt;"><span style="font-size: 11pt; font-weight: bold;">           </span> 盒模型的组成，由里向外，content，padding，</span><span style="font-size: 11pt;">border，</span><span style="font-size: 11pt;">margin</span></div><div><span style="font-size: 11pt;">            标准的IE盒子模型中，width表示content，padding，border 三个部分的宽度</span></div><div><span style="font-size: 11pt;">            标准的盒模型中，width指content的部分的内容</span></div><div><span style="font-size: 11pt;">            </span><span style="font-size: 11pt;"><img src="面试大全 2020年11月2日_files/Image [1].png" type="image/png" data-filename="Image.png"/></span></div><ol start="6"><li><div><font style="font-size: 12pt;"><span style="font-size: 12pt; color: rgb(255, 0, 0); font-weight: bold;">如何清除浮动</span></font></div></li></ol><div><span style="font-size: 12pt;"><span style="font-size: 12pt; color: rgb(255, 0, 0); font-weight: bold;">            </span></span><span style="font-size: 12pt;"><span style="font-size: 12pt; color: rgb(255, 0, 0); font-weight: bold;"><img src="面试大全 2020年11月2日_files/Image [2].png" type="image/png" data-filename="Image.png"/></span></span></div><div><span style="font-size: 12pt;"><br/></span></div><ol start="7"><li><div><span style="font-size: 12pt;"><span style="font-size: 12pt; color: rgb(255, 0, 0); font-weight: bold;">label标签的使用，</span></span></div></li></ol><div><span style="font-size: 12pt; color: rgb(255, 0, 0); font-weight: bold;">    </span><span style="font-size: 12pt; color: rgb(255, 0, 0); font-weight: bold;">    </span><span style="font-size: 12pt; color: rgb(255, 0, 0); font-weight: bold;">    </span><span style="font-size: 11pt;">方便点击，扩大鼠标范围，增强用户体验</span></div><ol start="8"><li><div><font style="font-size: 12pt;"><span style="font-size: 12pt; color: rgb(255, 0, 0); font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-weight: bold;">遍历A节点的父节点下的所有子节点</span></font></div></li></ol><div>            <img src="面试大全 2020年11月2日_files/Image [3].png" type="image/png" data-filename="Image.png"/></div><ol start="9"><li><div><font style="font-size: 12pt;"><span style="font-size: 12pt; color: rgb(255, 0, 0); font-weight: bold;">fetch axios ajax的区别</span></font></div></li></ol><div><span style="font-size: 12pt; color: rgb(255, 0, 0); font-weight: bold;">    </span><span style="font-size: 12pt; color: rgb(255, 0, 0); font-weight: bold;">   </span> <span style="font-size: 11pt;">a. fetch语法简介，更加语义化</span></div><div><span style="font-size: 11pt;">         b. 脱离的XHR，是ES规范里新的实现方式</span></div><div><span style="font-size: 11pt;">            </span><span style="font-size: 11pt;"><img src="面试大全 2020年11月2日_files/Image [4].png" type="image/png" data-filename="Image.png"/></span></div><div><span style="font-size: 11pt;">        结合以上思想，还是axios比较适合日常的开发</span></div><ol start="10"><li><div><font style="font-size: 12pt;"><span style="font-size: 12pt; color: rgb(255, 0, 0); font-weight: bold;">CORS（跨域资源共享）</span></font></div></li></ol><div><span style="font-size: 12pt; color: rgb(255, 0, 0); font-weight: bold;">       </span> <span style="font-size: 11pt;">1. 简单请求和非简单请求</span></div><div><span style="font-size: 11pt;">              <span style="font-size: 11pt; color: rgb(77, 206, 29);">简单请求</span></span></div><div><span style="font-size: 11pt;">                 </span><span style="font-size: 11pt;"><img src="面试大全 2020年11月2日_files/Image [5].png" type="image/png" data-filename="Image.png"/></span></div><div>                这是为了兼容表单（form），因为历史上表单一直可以发出跨域请求。AJAX 的跨域设计就是，只要表单可以发，AJAX 就可以直接发。凡是不同时满足上面两个条件，就属于非简单请求。</div><div>                浏览器对这两种请求的处理，是不一样的。</div><div>            <span style="font-size: 12pt; color: rgb(77, 206, 29);">非简单请求</span></div><div>                预检请求</div><div>                    put delete 请求 </div><div>                    或者Content-Type 为 application/json</div><ol start="2"><li><div><span style="font-size: 11pt;">设置跨域</span></div></li></ol><div>            <span style="border: none; text-shadow: white 0px 1px; direction: ltr; white-space: pre; word-spacing: normal; font-size: 1.2em; tab-size: 4; hyphens: none; overflow: auto; background: rgb(245, 242, 240); letter-spacing: -0.133333px; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; -webkit-text-stroke-width: 0px; color: rgb(0, 119, 170); font-family: monospace, Consolas, Monaco, &quot;Andale Mono&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">Access-Control-Allow-Origin:</span> <span style="border: none; text-shadow: white 0px 1px; direction: ltr; white-space: pre; word-spacing: normal; font-size: 1.2em; tab-size: 4; hyphens: none; overflow: auto; background: rgb(245, 242, 240); letter-spacing: -0.133333px; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; -webkit-text-stroke-width: 0px; color: black; font-family: monospace, Consolas, Monaco, &quot;Andale Mono&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">*</span></div><ol start="3"><li><div><span style="font-size: 11pt; font-family: monospace;">withCredentials属性</span></div></li></ol><div><span style="font-size: 11pt; font-family: monospace;">    <img src="面试大全 2020年11月2日_files/Image [6].png" type="image/png" data-filename="Image.png"/></span></div><ol start="11"><li><div><font style="font-size: 12pt;"><span style="font-size: 12pt;"><span style="font-size: 12pt; color: rgb(255, 0, 0); font-family: Arial; font-weight: bold;">如何中断ajax请求</span></span></font></div></li></ol><div><span style="font-size: 12pt; font-family: monospace;"><span style="font-size: 12pt; font-family: monospace; color: rgb(255, 0, 0); font-weight: bold;">   </span> 1.设置时间自动断开，（</span>axios.CancelToken<span style="font-size: 12pt; font-family: monospace;">）2. 手动停止请求：ajax.abort()方法</span></div><ol start="12"><li><div><span style="font-size: 12pt;"><span style="font-size: 12pt; color: rgb(255, 0, 0); font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-weight: bold;">target、currentTarget的区别？</span></span></div></li></ol><div><span style="font-size: 12pt; color: rgb(255, 0, 0); font-weight: bold;">    </span><span style="font-size: 12pt; color: rgb(255, 0, 0); font-weight: bold;">   </span> <font style="font-size: 11pt;"><span style="font-size: 11pt;">target是指被点击的Dom元素，currentTarget是指当前所绑定的Dom元素，区别就是，target属于外部，如果父节点绑定了事件，子节点点击了 target就是父元素的Dom树</span></font></div><div><span style="font-size: 11pt;">            dom事件绑定在父元素：使用e.currentTarget </span><span style="font-size: 11pt; color: unset; font-family: unset;">他和this 的作用是差不多的，始终返回的是绑定事件的元素</span></div><div><br/></div><div>            <img src="面试大全 2020年11月2日_files/Image [7].png" type="image/png" data-filename="Image.png"/></div><div>            dom事件绑定在本身Dom元素：  e.target</div><div>            <img src="面试大全 2020年11月2日_files/Image [8].png" type="image/png" data-filename="Image.png"/></div></div><ol start="13"><li><div><font style="font-size: 12pt;"><span style="font-size: 12pt; color: rgb(255, 0, 0); font-weight: bold;">宏任务与微任务</span></font></div></li></ol><div><span style="font-size: 12pt; color: rgb(255, 0, 0); font-weight: bold;">    </span><span style="font-size: 12pt; color: rgb(255, 0, 0); font-weight: bold;"> </span> <span style="font-size: 12pt; font-weight: bold;"> </span><span style="font-size: 11pt;">宏任务：srcipt setTimeout setInterval setImmediate I/O UI rending</span></div><div><span style="font-size: 11pt;">        微任务： promise Object.observe MutationObject</span></div><div><span style="font-size: 11pt;">        任务优先级：process.nextTick &gt; promise.then &gt;</span> <span style="font-size: 11pt;">requestAnimationFrame</span> &gt; <span style="font-size: 11pt;">setTimeout &gt; setImmediate</span></div><div><span style="font-size: 11pt;">       </span></div><div><span style="font-size: 11pt;">        </span><span style="font-size: 11pt;"><img src="面试大全 2020年11月2日_files/Image [9].png" type="image/png" data-filename="Image.png"/></span></div><div><span style="font-size: 11pt;"><br/></span></div><div><span style="font-size: 11pt;"><img src="面试大全 2020年11月2日_files/Image [10].png" type="image/png" data-filename="Image.png"/></span></div><div><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; overflow-wrap: break-word; white-space: pre-wrap;"><span style="color: rgb(123, 0, 61); font-variant-caps: normal; font-variant-ligatures: normal; font-weight: bold;">1．点击 inner 按钮时，打印 click ,</span></span></div><div><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; overflow-wrap: break-word; white-space: pre-wrap;"><span style="color: rgb(123, 0, 61); font-variant-caps: normal; font-variant-ligatures: normal; font-weight: bold;">2．碰到了第一个徽任务，放入当前宏任务（也就是 srcipt 标签里面）的后边，再碰到微任务再同样的方式按顺序排在宏任务的后边。</span></span></div><div><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; overflow-wrap: break-word; white-space: pre-wrap;"><span style="color: rgb(123, 0, 61); font-variant-caps: normal; font-variant-ligatures: normal; font-weight: bold;">3．这时又来了一个微任务（ $ 0 uter 的 cIi 〔 k 监听）再次走入微任务队列。</span></span></div><div><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; overflow-wrap: break-word; white-space: pre-wrap;"><span style="color: rgb(123, 0, 61); font-variant-caps: normal; font-variant-ligatures: normal; font-weight: bold;">4．直到当前宏任务里面不在有微任务了，开始顺序执行微任务．</span></span></div><div><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; overflow-wrap: break-word; white-space: pre-wrap; color: rgb(123, 0, 61); font-variant-caps: normal; font-variant-ligatures: normal; font-weight: bold;">      打印 click</span><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; overflow-wrap: break-word; white-space: pre-wrap; color: rgb(123, 0, 61); font-variant-caps: normal; font-variant-ligatures: normal; font-weight: bold;">一＞</span> <span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; overflow-wrap: break-word; white-space: pre-wrap; color: rgb(123, 0, 61); font-variant-caps: normal; font-variant-ligatures: normal; font-weight: bold;">promise</span> <span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; overflow-wrap: break-word; white-space: pre-wrap; color: rgb(123, 0, 61); font-variant-caps: normal; font-variant-ligatures: normal; font-weight: bold;">一＞</span> <span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; overflow-wrap: break-word; white-space: pre-wrap; color: rgb(123, 0, 61); font-variant-caps: normal; font-variant-ligatures: normal; font-weight: bold;">observer</span> <span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; overflow-wrap: break-word; white-space: pre-wrap; color: rgb(123, 0, 61); font-variant-caps: normal; font-variant-ligatures: normal; font-weight: bold;">一＞</span> <span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; overflow-wrap: break-word; white-space: pre-wrap; color: rgb(123, 0, 61); font-variant-caps: normal; font-variant-ligatures: normal; font-weight: bold;">click</span> <span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; overflow-wrap: break-word; white-space: pre-wrap; color: rgb(123, 0, 61); font-variant-caps: normal; font-variant-ligatures: normal; font-weight: bold;">一＞</span> <span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; overflow-wrap: break-word; white-space: pre-wrap; color: rgb(123, 0, 61); font-variant-caps: normal; font-variant-ligatures: normal; font-weight: bold;">promise</span> <span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; overflow-wrap: break-word; white-space: pre-wrap; color: rgb(123, 0, 61); font-variant-caps: normal; font-variant-ligatures: normal; font-weight: bold;">一＞</span> <span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; overflow-wrap: break-word; white-space: pre-wrap; color: rgb(123, 0, 61); font-variant-caps: normal; font-variant-ligatures: normal; font-weight: bold;">observer</span></div><div><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; overflow-wrap: break-word; white-space: pre-wrap; color: rgb(123, 0, 61); font-variant-caps: normal; font-variant-ligatures: normal; font-weight: bold;">5．宏任务队列中，排列 7 四个宏任务，依次是</span> <span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; overflow-wrap: break-word; white-space: pre-wrap; color: rgb(123, 0, 61); font-variant-caps: normal; font-variant-ligatures: normal; font-weight: bold;">animationFrame</span> <span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; overflow-wrap: break-word; white-space: pre-wrap; color: rgb(123, 0, 61); font-variant-caps: normal; font-variant-ligatures: normal; font-weight: bold;">一＞</span> <span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; overflow-wrap: break-word; white-space: pre-wrap; color: rgb(123, 0, 61); font-variant-caps: normal; font-variant-ligatures: normal; font-weight: bold;">animationFrame</span><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; overflow-wrap: break-word; white-space: pre-wrap; color: rgb(123, 0, 61); font-variant-caps: normal; font-variant-ligatures: normal; font-weight: bold;">timeout</span> <span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; overflow-wrap: break-word; white-space: pre-wrap; color: rgb(123, 0, 61); font-variant-caps: normal; font-variant-ligatures: normal; font-weight: bold;">一＞ timeout ----&gt;</span> <span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; overflow-wrap: break-word; white-space: pre-wrap; color: rgb(123, 0, 61); font-variant-caps: normal; font-variant-ligatures: normal; font-weight: bold;">animationFrame</span></div><div><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; overflow-wrap: break-word; white-space: pre-wrap;"><span style="color: rgb(123, 0, 61); font-variant-caps: normal; font-variant-ligatures: normal; font-weight: bold;">    由于setTimeout优先级最低，所以最后执行。</span></span></div><div><br/></div><ol start="14"><li><div><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; overflow-wrap: break-word; white-space: pre-wrap;"><font color="#FF0000" style="font-size: 12pt;"><span style="font-size: 12pt; color: rgb(255, 0, 0); font-variant-caps: normal; font-variant-ligatures: normal; font-weight: bold;">说一下继承的集中方式以及优缺点</span></font></span></div></li></ol><div><span style="font-size: 12pt; color: rgb(255, 0, 0); font-weight: bold;">    </span><span style="font-size: 11pt;">    1. 借用构造函数，使用call或者apply这些方法，讲父对象绑定在子对象上面。</span></div><div><span style="font-size: 11pt;">            没有原型，复用无从谈起。</span></div><div><span style="font-size: 11pt;">         2. 原型继承，子对象的prototype指向父对象的一个实例。</span></div><div><span style="font-size: 11pt;">            如果重写原型会中断关系，使用引用类型的原型，并且子类型无法给超类型传递参数</span></div><div><span style="font-size: 11pt;">         3. 组合继承  </span><span style="font-size: 11pt;">new Person()， extends 继承某个类。</span></div><div><span style="font-size: 11pt;">            最常用的方法。但是面相对象的设计模式使用非常少。只要合理利用，也不失为一种高效好方法。</span></div><ol start="15"><li><div><font style="font-size: 12pt;"><span style="font-size: 12pt; color: rgb(255, 0, 0); font-weight: bold;">闭包的简单概述</span></font></div></li></ol><div><span style="font-size: 11pt;">        A函数中包含B函数，B函数可以访问他函数外部的变量，也就是A的变量。这个作用域就是闭包。</span></div><div><span style="font-size: 11pt;">        - 内存泄漏</span></div><div><span style="font-size: 11pt;">            </span><span style="background-color: rgb(255, 255, 255); font-size: 15px;"><span style="font-size: 15px; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); color: rgb(18, 18, 18); font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-variant-caps: normal; font-variant-ligatures: normal;">首先，如其他回答所言，IE6时代有bug，闭包会造成内存泄漏，这个现在已经无须考虑了。 </span></span></div><div><span style="font-size: 15px; color: rgb(18, 18, 18); font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif;">            其次，闭包本身不会造成内存泄漏，但闭包过多很容易导致内存泄漏。</span></div><div><span style="font-size: 15px; color: rgb(18, 18, 18); font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif;">            </span></div><ol start="16"><li><div><font style="font-size: 12pt;"><span style="font-size: 12pt; color: rgb(255, 0, 0); font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-weight: bold;">作用域相关问题</span></font></div></li></ol><div>        1. 全局作用域</div><div>            最外层的函数的定义的变量有全局作用域、window也有全局作用域、所有未定义直接赋值也拥有全局作用于（let str = '11'）</div><div>        2. 局部作用域</div><div>            变量在函数内部声明，也有人称之为函数作用域。函数执行完毕，变量或者作用域立即销毁。</div><div>        3. 块级作用域</div><div>             <span style="font-size: 14px; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(75, 75, 75); font-family: &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; font-variant-caps: normal; font-variant-ligatures: normal;">let/const/function都是块级作用域</span></div><div><span style="font-size: 14px; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(75, 75, 75); font-family: &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; font-variant-caps: normal; font-variant-ligatures: normal;">        - 作用域链</span></div><div><span style="font-size: 14px; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(75, 75, 75); font-family: &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; font-variant-caps: normal; font-variant-ligatures: normal;">            理解：简单的理解就是，变量与函数的查找规则。</span></div><div><span style="font-size: 14px; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(75, 75, 75); font-family: &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; font-variant-caps: normal; font-variant-ligatures: normal;">                查找规则：如果是一个函数需要用到的变量，那就会在自己作用于找，如果没有，就一层一层往外面找，</span></div><div><span style="font-size: 14px; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(75, 75, 75); font-family: &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; font-variant-caps: normal; font-variant-ligatures: normal;">                                只会向外找。</span></div><div><span style="font-size: 14px; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(75, 75, 75); font-family: &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; font-variant-caps: normal; font-variant-ligatures: normal;">                函数/变量提升：优先级大于变量提升，js代码执行之前，浏览器会把当前上下文中所有带有var / function 的关键词</span></div><div><span style="font-size: 14px; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(75, 75, 75); font-family: &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; font-variant-caps: normal; font-variant-ligatures: normal;">                                进行声明和定义，解析到他们对应的作用域开始位置，意义在于：使用该变量不会报错，即使一个</span></div><div><span style="font-size: 14px; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(75, 75, 75); font-family: &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; font-variant-caps: normal; font-variant-ligatures: normal;">                                function 代码中是先调用的， 但是优先执行代码中所有var 或者 function ... 的声明，这就叫函数提升，</span></div><div><span style="font-size: 14px; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(75, 75, 75); font-family: &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; font-variant-caps: normal; font-variant-ligatures: normal;">                                也叫预解析。</span></div><ol start="17"><li><div><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><font style="font-size: 12pt;"><span style="font-size: 12pt; color: rgb(255, 0, 0); font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: bold;">Hook的规则原理</span></font></span></div></li></ol><div><span style="font-size: 12pt;"><span style="font-size: 12pt; color: rgb(255, 0, 0); font-weight: bold;">            hook是一种改变程序执行流程的一种技术统称</span></span></div><div><span style="font-size: 12pt; color: rgb(255, 0, 0); font-weight: bold;">    </span><span style="font-size: 12pt; color: rgb(255, 0, 0); font-weight: bold;">    </span><span style="font-size: 12pt; color: rgb(255, 0, 0); font-weight: bold;">   </span> <span style="font-size: 11pt;">1. capture Value特性</span></div><div><span style="font-size: 11pt;">                </span><span style="font-size: 11pt;"><img src="面试大全 2020年11月2日_files/Image [11].png" type="image/png" data-filename="Image.png"/></span></div><div><span style="font-size: 11pt;">                执行log函数的时候，3秒之后，temp在这个render中是一个常量，打印出来也就是5。</span></div><div><span style="font-size: 11pt;">             </span> <span style="font-size: 11pt; font-weight: bold;"> </span> <span style="font-size: 11pt; color: rgb(150, 238, 125); font-weight: bold;">借助ref解决</span></div><div><span style="font-size: 11pt;">                </span><span style="font-size: 11pt;"><img src="面试大全 2020年11月2日_files/Image [12].png" type="image/png" data-filename="Image.png"/></span></div><div><span style="font-size: 11pt;">                </span></div><div><br/></div><ol start="17"><li><div><font style="font-size: 16pt;"><span style="font-size: 16pt; color: rgb(222, 87, 0); font-weight: bold;">事件循环机制</span></font></div></li></ol><div><span style="font-size: 11pt;">        众所周知，js是单线程语言，单线程中，包括了异步和同步任务，首先执行的同步任务也就是宏任务，将每一个宏任务执行完毕，再循环执行宏任务的子任务也就是微任务（异步的）。这一套循环就是事件循环机制。</span></div><div><br/></div></div><div><br/></div></span>
</div></body></html> 